Implementar Material Design con CDN

Descripcion

Como implementar Material Design en un proyecto mediante CDN

Material Design con CDN

Implementar liberías CSS y JavaScript

Incluimos el siguiente código en el head:

<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

Instanciar JavaScript

Para instanciar el JavaScript usando el CDN cogemos el código del componente (el que figura en la web de material design), y en vez de hacer el import cambiamos el nombre del componente añadiendo mdc.libreria al inicio.

Por ejemplo con el componente Button sería así:

Código de componente:

import {MDCRipple} from '@material/ripple';

const buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));

En este caso quedaría así:

<script>
  const buttonRipple = new mdc.ripple.MDCRipple(document.querySelector('.mdc-button'));
</script>

Eliminamos el import y antes de MDCRipple añadimos el nombre de la librería, en este caso: mdc.ripple.

En este caso el código javascript solo se usa para añadir el efecto visual del ripple, al pulsar el boton.

Componente Button

Código HTML:

<button class="mdc-button mdc-button--raised" onclick="mensaje()">
  <span class="mdc-button__ripple"></span>
  <span class="mdc-button__label">Contained Button</span>
</button>

Código Javascript:

<script>
  const buttonRipple = new mdc.ripple.MDCRipple(document.querySelector('.mdc-button'));

  function mensaje() {
    window.alert("Hola !!!");
  }
</script>

El código completo para implementar un botón sería así:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  </head>

  <body>

    <button class="mdc-button mdc-button--raised" onclick="mensaje()">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Contained Button</span>
    </button>

    <script>
      const buttonRipple = new mdc.ripple.MDCRipple(document.querySelector('.mdc-button'));

      function mensaje() {
        window.alert("Hola !!!");
      }
    </script>

  </body>
</html>

La linea:

<span class="mdc-button__ripple"></span>

Es la que se encarga de añadir el effecto ripple junto con el javascript.

Componente TextField

Para el componente TextField la librería de JavaScript que se usa con el CDN es la siguiente:

mdc.textField

Código HTML:

<label class="mdc-text-field mdc-text-field--filled">
  <span class="mdc-text-field__ripple"></span>
  <span class="mdc-floating-label" id="my-label-id">Hint text</span>
  <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
  <span class="mdc-line-ripple"></span>
</label>

Código JavaScript:

let textField = new mdc.textField.MDCTextField(document.querySelector('.mdc-text-field'));

Ejemplo con un botón que indica el texto introducido en el textField:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  </head>

  <body>
    <button class="mdc-button mdc-button--raised" onclick="mensaje()">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Contained Button</span>
    </button>

    <label class="mdc-text-field mdc-text-field--filled">
      <span class="mdc-text-field__ripple"></span>
      <span class="mdc-floating-label" id="my-label-id">Hint text</span>
      <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
      <span class="mdc-line-ripple"></span>
    </label>

    <script>
      let textField = new mdc.textField.MDCTextField(document.querySelector('.mdc-text-field'));

      function mensaje(){
        window.alert(textField.value)
      }
    </script>

  </body>
</html>

Para leer el valor del TextField usamos:

textField.value

Componente Switch

Para el componente switch, la libería de javascript que se usa con el CDN es la siguiente:

mdc.switchControl

Código HTML:

<button id="selected-switch" class="mdc-switch mdc-switch--selected" type="button" role="switch" aria-checked="true">
  <div class="mdc-switch__track"></div>
  <div class="mdc-switch__handle-track">
    <div class="mdc-switch__handle">
      <div class="mdc-switch__shadow">
        <div class="mdc-elevation-overlay"></div>
      </div>
      <div class="mdc-switch__ripple"></div>
      <div class="mdc-switch__icons">
        <svg class="mdc-switch__icon mdc-switch__icon--on" viewBox="0 0 24 24">
          <path d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" />
        </svg>
        <svg class="mdc-switch__icon mdc-switch__icon--off" viewBox="0 0 24 24">
          <path d="M20 13H4v-2h16v2z" />
        </svg>
      </div>
    </div>
  </div>
</button>
<label for="selected-switch">off/on</label>

Código JavaScript:

let switchControl
for (const el of document.querySelectorAll('.mdc-switch')) {
  switchControl = new mdc.switchControl.MDCSwitch(el);
}

Ejemplo con un boton que indica si el switch está o no seleccionado:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  </head>

  <body>

    <button class="mdc-button mdc-button--raised" onclick="mensaje()">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Contained Button</span>
    </button>

    <button id="basic-switch" class="mdc-switch mdc-switch--unselected" type="button" role="switch" aria-checked="false">
      <div class="mdc-switch__track"></div>
      <div class="mdc-switch__handle-track">
        <div class="mdc-switch__handle">
          <div class="mdc-switch__shadow">
            <div class="mdc-elevation-overlay"></div>
          </div>
          <div class="mdc-switch__ripple"></div>
          <div class="mdc-switch__icons">
            <svg class="mdc-switch__icon mdc-switch__icon--on" viewBox="0 0 24 24">
              <path d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" />
            </svg>
            <svg class="mdc-switch__icon mdc-switch__icon--off" viewBox="0 0 24 24">
              <path d="M20 13H4v-2h16v2z" />
            </svg>
          </div>
        </div>
      </div>
    </button>
    <label for="basic-switch">off/on</label>

    <script>
      const buttonRipple = new mdc.ripple.MDCRipple(document.querySelector('.mdc-button'));
      let switchControl
      for (const el of document.querySelectorAll('.mdc-switch')) {
          switchControl = new mdc.switchControl.MDCSwitch(el);
      }

      function mensaje() {
        window.alert(switchControl.selected);

      }
    </script>

  </body>
</html>

Para leer el estado del Switch usamos:

switchControl.selected

Componente List

Para el componente list, la librería que se usa para el CDN es la siguiente:

mdc.list

Código HTML:

<ul class="mdc-list">
  <li class="mdc-list-item" tabindex="0">
    <span class="mdc-list-item__ripple"></span>
    <span class="mdc-list-item__text">First</span>
  </li>
  <li class="mdc-list-item">
    <span class="mdc-list-item__ripple"></span>
    <span class="mdc-list-item__text">Second</span>
  </li>
  <li class="mdc-list-item">
    <span class="mdc-list-item__ripple"></span>
    <span class="mdc-list-item__text">Third</span>
  </li>
</ul>

Código JavaScript:

let list = new mdc.list.MDCList(document.querySelector('.mdc-list'));
const listItemRipples = list.listElements.map((listItemEl) => new mdc.ripple.MDCRipple(listItemEl));
list.singleSelection = true;

Código de ejemplo con un botón para mostrar que opción está selecionada:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  </head>

  <body>
    <button class="mdc-button mdc-button--raised" onclick="mensaje()">
      <span class="mdc-button__ripple"></span>
      <span class="mdc-button__label">Contained Button</span>
    </button>

    <ul class="mdc-list">
      <li class="mdc-list-item" tabindex="0">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">First</span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Second</span>
      </li>
      <li class="mdc-list-item">
        <span class="mdc-list-item__ripple"></span>
        <span class="mdc-list-item__text">Third</span>
      </li>
    </ul>

    <script>
      let list = new mdc.list.MDCList(document.querySelector('.mdc-list'));
      const listItemRipples = list.listElements.map((listItemEl) => new mdc.ripple.MDCRipple(listItemEl));
      list.singleSelection = true;

      function mensaje(){
        window.alert(list.selectedIndex)
      }
    </script>

  </body>
</html>

Para leer el estado del List usamos:

list.selectedIndex

Si queremos obtener el texto de la opción seleccionada podemos substituir la linea del windows.alert por algo como esto:

window.alert(document.getElementsByClassName("mdc-list-item__text")[list.selectedIndex].innerHTML)
Tags

Web development | Material Design | CDN